<template>
	<view>
		<view class="footerT" style="padding-bottom: 20rpx;">
			<view class="tit">
				<image src="../../static/cljbxx.png" mode=""></image>车辆信息
			</view>
			<view class="titBot">
				<view class="titBot1"><text>品牌</text></view>
				<view class="titBot2"><text>{{ zhInfoDetail.pp || '比亚迪' }} {{ zhInfoDetail.cx  || '汉' }}</text></view>
			</view>
			<view class="titBot">
				<view class="titBot1"><text>款型</text></view>
				<view class="titBot2"><text>{{ zhInfoDetail.nk || '2021'}}款
						{{ zhInfoDetail.cxing || 'EV四驱高性能车' }}</text></view>
			</view>
			<view class="titBot">
				<view class="titBot1"><text>VIN码</text></view>
				<view class="titBot2"><text>{{ zhInfoDetail.vinq || 'WP0AA2Y19MSA10081' }}</text></view>
			</view>
		</view>

		<view class="footerT" style="padding-bottom: 20rpx;margin-top: 10rpx;">
			<view class="tit">
				<image src="../../static/zhjl.png" mode=""></image>召回记录
			</view>
			<view class="titBot" v-for="(item,index) in list" :key="index">
				<view class="titBot1"><text>{{item.name}}</text></view>
				<view class="titBot2">
					<text>{{item.value}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import API from "@/api/morePage.js"
	export default {
		data() {
			return {
				form: {},
				list: [],
				obj: null,
				zhInfoDetail: null,
				paramVin: ''
			};
		},
		onLoad(option) {
			if (option.item) {
				const itemJson = JSON.parse(decodeURIComponent(option.item));
				this.paramVin = itemJson.vinq;
			}

		},
		onShow() {
			this.getzhQuery()
		},
		methods: {
			getzhQuery() {
				API.getzhQuery({
					vin: this.paramVin
				}).then(res => {
					console.log(res)
					this.zhInfoDetail = res.data
					this.list = res.data.list
				})
			},
		}
	}
</script>

<style lang="scss">
	.tit {
		height: 90rpx;
		line-height: 90rpx;
		text-align: left;
		display: flex;
		font-size: 28rpx;
		color: #303133;
		font-weight: bold;
		border: 1px solid #D8D8D8;
		background-color: #f5f6f8;

		image {
			width: 38rpx;
			height: 30rpx;
			margin-right: 20rpx;
			margin-top: 30rpx;
			margin-left: 20rpx;
		}
	}


	.footerT {
		background-color: #fff;
		padding: 32rpx;

	}

	.titBot {
		display: flex;
		justify-content: space-between;
		border-left: 1px solid #D8D8D8;
		border-bottom: 1px solid #D8D8D8;
		border-right: 1px solid #D8D8D8;
		flex-wrap: wrap;
		text-align: center;

		.titBot1 {
			width: 30%;
			// border-right: 1px solid #D8D8D8;
			height: 100%;
			font-size: 28rpx;
			color: #303133;
			font-weight: bold;
			display: table;

			text {
				padding: 32rpx 24rpx;
				vertical-align: middle;
				display: table-cell;
			}
		}

		.titBot2 {
			width: 70%;
			display: table;
			border-left: 1px solid #D8D8D8;

			text {
				padding: 32rpx 24rpx;
				vertical-align: middle;
				display: table-cell;
			}
		}
	}
</style>
